<template>
  <div class="main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-input
          style="width:300px"
          placeholder="请输入搜索的内容"
          v-model="selectInput"
          clearable>
        </el-input>
        <div style="margin-left: 65%;">
          <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
          <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加骑手</el-button>
        </div>
      </div>
      <div class="text item">
        <el-table
          :data="tableData"
          border
          stripe
          v-loading="tableLoading"
          style="width: 100%;text-align:center"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            align="center"
            width="55">
          </el-table-column>
          <el-table-column
            prop="accounts"
            align="center"
            label="帐号"
            width="250">
            <template slot-scope="scope">
              <el-button type="text" @click="showRiderInfo(scope.row.accounts)">
                {{scope.row.accounts}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            align="center"
            label="昵称"
            width="250">
          </el-table-column>
          <el-table-column
            prop="license"
            align="center"
            label="身份证"
            width="250">
          </el-table-column>
          <el-table-column
            prop="telephone"
            align="center"
            label="手机号"
            width="250">
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="状态"
            width="250">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 'false'" style="color:red">待审核</span>
              <span v-else style="color:green">已审核</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="action"
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRider(scope.row.accounts)"
                type="danger"
                size="small"
                icon="el-icon-delete">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top:15px;display:flex;justify-content: center;align-items: center;">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      :with-header="false">
      <el-form ref="form" :model="form" label-width="80px">
        <el-divider></el-divider>
        <el-form-item label="帐号">
          <span>{{form.accounts}}</span>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="密码">
          <el-input v-model="form.password" class="drawerInput" v-if="editor"></el-input>
          <span v-else>{{form.password}}</span>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="昵称">
          <el-input v-model="form.username" class="drawerInput" v-if="editor"></el-input>
          <span v-else>{{form.username}}</span>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="手机号">
          <el-input v-model="form.telephone" class="drawerInput" v-if="editor"></el-input>
          <span v-else>{{form.telephone}}</span>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="身份证">
          <el-input v-model="form.license" class="drawerInput" v-if="editor"></el-input>
          <span v-else>{{form.license}}</span>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="头像">
          <el-input v-model="form.avatar" class="drawerInput" v-if="editor"></el-input>
          <span v-else>{{form.avatar}}</span>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择" v-if="editor">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span v-else>{{form.gender}}</span>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="状态">
          <el-switch
            v-model="form.status"
            active-text="已审核"
            inactive-text="待审核"
            :disabled="!editor">
          </el-switch>
        </el-form-item>
        <el-divider></el-divider>
        <el-button type="primary" size="small" style="float:right" @click="editor = true" icon="el-icon-edit" v-if="editor === false">编辑</el-button>
        <div v-else>
          <el-button type="primary" size="small" style="float:right" @click="updateRiderInfoByAccounts" icon="el-icon-check">确定</el-button>
          <el-button style="float:right;margin:0px 5px" size="small" @click="editor = false" icon="el-icon-close">取消</el-button>
        </div>
      </el-form>
    </el-drawer>
    <el-dialog title="添加骑手" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="addform" label-width="80px" style="margin:0 auto">
        <el-form-item label="帐号">
          <el-input v-model="addform.accounts" style="margin:2px 0;"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addform.password" style="margin:2px 0"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="addform.username" style="margin:2px 0"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="addform.telephone" style="margin:2px 0"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="addform.license" style="margin:2px 0"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-input v-model="addform.avatar" style="margin:2px 0"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="addform.gender" placeholder="请选择" style="margin:2px 0;width:100%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"  icon="el-icon-close">取 消</el-button>
        <el-button type="primary" @click="addRider" icon="el-icon-check">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="删除骑手"
      :visible.sync="deleteDialogVisible"
      width="500px">
      <span>确定要删除此骑手吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false" icon="el-icon-close">取 消</el-button>
        <el-button type="primary" @click="sureDeleteRider" icon="el-icon-check">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRiderInfo, getRiderInfoByAccounts, updateRiderInfoByAccounts, addRider, deleteRider} from "@/api/rider"
export default {
  name: "rider",
  data() {
    return{
      selectInput: "",
      currentPage: 1,
      total: 0,
      tableLoading: false,
      tableData:[],

      drawer: false,
      drawerTitle: "",

      form:{
        accounts: "",
        password: "",
        username: "",
        telephone: "",
        avatar: "",
        license: "",
        gender: "",
        status: ""
      },
      editor: false,
      options: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        }
      ],

      dialogFormVisible: false,
      addform:{
        accounts: "",
        password: "",
        username: "",
        telephone: "",
        avatar: "",
        license: "",
        gender: "",
        status: ""
      },

      deleteDialogVisible:false,
      deleteAccounts: "",
        
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.tableLoading = true;
      getRiderInfo().then((res)=> {
        this.tableData = res.data
        this.total = res.data.length;
        this.tableLoading = false;
      })
    },
    refresh() {
      this.init();
    },
    // 显示骑手信息
    showRiderInfo(accounts) {
      this.drawerTitle = "骑手：" + accounts;
      getRiderInfoByAccounts(accounts).then((res)=>{
        this.form = res.data;
        if (this.form.status === 'false') {
          this.form.status = false;
        } else {
          this.form.status = true
        }
        this.drawer = true;
      }).catch((err)=>{

      })
    },
    // 更新骑手信息
    updateRiderInfoByAccounts() {
      if (this.form.status === false) {
          this.form.status = 'false';
        } else {
          this.form.status = 'true'
      }
      updateRiderInfoByAccounts(this.form).then((res)=>{
        this.drawer = false;
        this.refresh()
        this.editor = false
      })
    },
    // 新增骑手
    addRider() {
      addRider(this.addform).then((res)=>{
        this.dialogFormVisible = false;
        this.refresh()
      })
    },
    // 删除骑手
    deleteRider(accounts) {
      this.deleteDialogVisible = true;
      this.deleteAccounts = accounts;
    },
    sureDeleteRider(){
      deleteRider(this.deleteAccounts).then((res)=>{
        this.deleteDialogVisible = false;
        this.refresh()
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
};
</script>
<style scoped>
  .main {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .clearfix{
    display: flex;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 95%;
    border-radius: 5px;
    margin-top: 10px;
    min-height: 800px;
  }
  .el-drawer__header span:focus {
    outline: 0;
  }
  .drawerInput {
    height: 25px;
    width: 200px;
  }
  .el-divider--horizontal{
    margin:10px 0 !important;
  }
  .el-form-item{
    margin-bottom: 0px !important;
  }
  .el-dialog{
    width: 480px!important;
  }
</style>
